<template>
    <page-view class="flex flex-col">
        <title-bar :show-back="true">选座购票</title-bar>
        <div class="content-box flex-1 overflow-auto">
            <van-skeleton :loading="isLoading" animate :row="8">
                <ul class="leading-6 px-[5px]">
                    <li class="font-bold ">{{ currentPlanInfo.movieInfo.movie_name }}
                        <span class="text-[14px] text-warningColor">￥{{ currentPlanInfo.price }}</span>
                    </li>
                    <li class="text-gray-500 text-[12px]">
                        时间：{{ formatDateTime(currentPlanInfo.plan_time) }}
                    </li>
                </ul>
                <ul
                  class="flex flex-row justify-around text-[12px] py-[5px] border-0 border-b border-solid border-gray-300">
                    <li class="flex items-center">
                        <div class="w-[30px] h-[26px] mr-2">
                            <img src="../assets/img/00.png" alt="">
                        </div>
                        可选
                    </li>
                    <li class="flex items-center">
                        <div class="w-[30px] h-[26px] mr-2">
                            <img src="../assets/img/01.png" alt="">
                        </div>
                        已售
                    </li>
                    <li class="flex items-center">
                        <div class="w-[30px] h-[26px] mr-2">
                            <img src="../assets/img/02.png" alt="">
                        </div>
                        可选
                    </li>
                </ul>
                <div class="w-[300px] h-[10px] bg-gray-300 rounded-b-[10px] mx-auto"></div>
                <!-- 座位渲染 -->
                <ul class="mt-[20px] overflow-auto py-[10px]">
                    <li class="flex items-center py-[5px] " v-for="(item1, index1) in siteList" :key="index1">
                        <div class="text-gray-400 text-[12px] px-[5px] font-bold">{{ index1 + 1 }}</div>
                        <div @click="siteClick(index1, index2)" class="w-[30px] h-[26px] mr-1 flex-shrink-0"
                          v-for="(item2, index2) in item1" :key="index2">
                            <img src="../assets/img/00.png" alt="" v-if="item2 == 0">
                            <img src="../assets/img/01.png" alt="" v-else-if="item2 == 1">
                            <img src="../assets/img/02.png" alt="" v-else-if="item2 == 2">
                        </div>
                    </li>
                </ul>
                <!-- 购票按钮 -->
                <button type="button" class="btn-buy disabled:opacity-30" :disabled="currentChoose.length <= 0">￥{{
                        currentChoose.length * currentPlanInfo.price
                }}选座购票</button>
                <ul class="flex mt-[10px] flex-wrap">
                    <li v-for="item in currentChoose" :key="item"
                      class=" m-[5px] p-[10px] w-[70px] h-[20px] text-[12px] bg-gray-100 flex justify-center items-center">
                        {{ item }}
                    </li>
                </ul>
            </van-skeleton>
        </div>
    </page-view>
</template>
<script setup>
import titleBar from '../components/title-bar.vue';
import { reactive, ref, watch } from "vue";
import { Toast } from "vant"
import { useRoute } from "vue-router"
import { formatDateTime } from "../utils/dateTimeUtils.js";
import API from '../utils/API';
const route = useRoute();
let siteList = ref([])
const isLoading = ref();
const currentPlanInfo = ref(null);
const siteClick = (index1, index2) => {
  //index1是一维的索引，index2是二维的索引
  if (siteList.value[index1][index2] == 0) {
    siteList.value[index1][index2] = 2;
  } else if (siteList.value[index1][index2] == 2) {
    siteList.value[index1][index2] = 0;
  } else if (siteList[index1][index2] == 1) {
    Toast("当前位置已售，不可选");
  }
}

isLoading.value = true;
API.planInfo.getSiteList(route.query.id).then(res => {
    if (res.status = "success") {
        currentPlanInfo.value = res.data
        siteList.value = JSON.parse(res.data.choose_site)
    }
}).finally(() => {
    isLoading.value = false;
})
const currentChoose = ref([]);
//监听siteList变化
watch(() => siteList, (newVal, oldVal) => {
    let temp = [];
    newVal.value.forEach((item1, index1) => {
        item1.forEach((item2, index2) => {
            if (item2 == 2) {
                temp.push(`第${index1 + 1}排第${index2 + 1}座`);
            }
        })
    })
    currentChoose.value = temp;
},{deep: true})
</script>
<style scoped lang="scss">
.btn-buy {
    @apply border-none bg-primaryColor text-white text-[12px] w-[80%] h-[32px] block m-auto rounded-full mt-3;
}
</style>